<template>
	<view>
		<nav-box :title="type == 1 ? '考场管理' : '成绩管理'"></nav-box>
		<view class="content">
			<view class="search-box u-m-b-48">
				<u-search height="80" :placeholder="`搜索要管理的${type == 1 ? '考试' : '成绩'}`" v-model="searchVal" :show-action="false" @search="searchExam"></u-search>
			</view>
			<view class="list-box">
				<u-collapse hover-class="none" :item-style="itemStyle">
					<u-collapse-item v-for="(item, index) in list" :key="item.id" :index="index" @change="itemChange">
						<template v-slot:title-all>
							<view class="title-box" style="width: 100%; display: flex; align-items: center; justify-content: space-between;">
								<view class="left-box" style="font-size: 24upx; color: #9d9d9d;">
									<text style="display: block ;font-size: 32upx; color: #4b4b4b; margin-bottom: 8upx;">{{ item.title }}</text>
								</view>
								<image :class="current == index ? 'active' : ''" src="../../../static/images/icon_22.png" mode="" style="width: 32upx; height: 32upx;"></image>
							</view>
						</template>
						<!-- 在这里跳转把当前考场id和type传到下一页 -->
						<block v-for="(item, oindex) in 3">
							<navigator :url="`../examManagementDetail/examManagementDetail?id=${item.id}&type=${type}`" hover-class="none">
								<view class="item-body">
									<view class="item-body-title">
										<text>第{{ oindex }}场</text>
										<text>考试状态：1111</text>
									</view>
									<view class="date-box">
										<text>起止时间：{{ item.startTime }} ～ {{ item.endTime }}</text>
									</view>
									<view class="number-box u-m-b-20">
										<text>总计人数：{{ item.count }}</text>
										<text>在考人数：{{ item.onTest }}</text>
										<text>缺考人数：{{ item.missTest }}</text>
										<text>交卷人数：{{ item.finishTest }}</text>
									</view>
								</view>
							</navigator>
						</block>
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: null, // 1考场管理  2成绩管理
			current: null,
			itemStyle: {
				borderBottom: '2upx solid #F1F1F1'
			},
			searchVal: '', // 用户输入的搜索的值
			list: []
		};
	},
	onLoad(options) {
		this.type = options.type;
		this.list = [
			{
				id: 1,
				title: '2021年春季测评考试',
				startTime: '2021/9/01 13:21',
				endTime: '2021/9/01 13:21',
				count: 100, //总计人数
				onTest: 50, //在考人数
				missTest: 20, //缺考人数
				finishTest: 20 //交卷人数
			},
			{
				id: 2,
				title: '2020年春季测评考试',
				startTime: '2021/9/01 13:21',
				endTime: '2021/9/01 13:21',
				count: 100, //总计人数
				onTest: 50, //在考人数
				missTest: 20, //缺考人数
				finishTest: 20 //交卷人数
			}
		];
	},
	methods: {
		searchExam() {
			// 走搜索接口 搜索值为this.searchVal
		},
		itemChange(e) {
			this.current = e.show ? e.index : null;
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	.active {
		transform: rotate(90deg);
		transition: all 0.3s;
	}
	background-color: #ffffff;
	.content {
		padding: 24upx 40upx;
		.list-box {
			.item-body {
				background-color: #f9fafb;
				color: #969696;
				font-size: 24upx;
				border-radius: 8upx;
				padding: 24upx;
				margin-bottom: 24upx;
				box-sizing: border-box;
				.item-body-title {
					margin-bottom: 20upx;
					text {
						display: inline-block;
						width: 50%;
					}
				}
				.date-box {
					margin-bottom: 28upx;
				}
				.number-box {
					text {
						display: inline-block;
						width: 50%;
						&:first-child {
							margin-bottom: 26upx;
						}
					}
				}
			}
		}
	}
}
</style>
